<template>
  <div class="order">
    <van-tabs  swipeable :active="active"  @change="onChange" color="#333" line-width="38" sticky="true">
      <van-tab v-for="(item,nav_id) in nav_list" :key="nav_id" :title="item.title" >
          <div class="content">
              <div class="list"
v-for="(keys,index) in item.title=='全部'?list:item.title=='待付款'?t_list:item.title=='待发货'?s_list:item.title=='待收货'?f_list:item.title=='待评价'?l_list:''" :key="index">
                  <div class="state">{{keys.state}}</div>
                  <div class="info"  @click="order_details(index)">
                      <image :src="keys.img" alt=""/>
                      <div class="info_r">
                          <div class="title">{{keys.title}}</div>
                          <div class="specifications">{{keys.Specifications}}</div>
                      </div>
                  </div>
                  <div class="total">
                      <div class="total_info">
                          <div class="num">共{{keys.num}}件商品</div>
                          <div class="price">合计：¥{{keys.price}}</div>
                      </div>
                  </div>
                  <div class="change_total">
                      <div class="change_info">
                          <div class="box" :style="id==1?'margin-left:20rpx':''" :key="id" @click="into(key.title)"
                          v-for="(key,id) in keys.state=='等待买家付款'?box:keys.state=='待发货'?box_t:keys.state=='卖家已发货'?box_s:keys.state=='交易成功'&&keys.date==1?box_f:keys.state=='交易成功'&&keys.date==0?box_l:keys.state=='交易关闭'?box_z:''" >{{key.title}}</div>
                      </div>
                  </div>
              </div>
          </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

export default {
  data () {
    return {
        active: '',
        box:[{title:'取消订单'},{title:'立即付款'}],
        box_t:[{title:'退款'}],
        box_s:[{title:'查看物流'},{title:'确认收货'}],
        box_f:[{title:'退换'},{title:'晒图评价'}],
        box_l:[{title:'退换'}],
        box_z:[{title:'删除订单'}],
        nav_list:[{title:'全部'},{title:'待付款'},{title:'待发货'},{title:'待收货'},{title:'待评价'}],
        list:[
          {state:'等待买家付款',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'},
          {state:'待发货',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'},
          {state:'卖家已发货',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'},
          {state:'交易成功',date:1,img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'},
          {state:'交易成功',date:0,img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'},
          {state:'交易关闭',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'}
        ],
        t_list:[{state:'等待买家付款',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'},],
        s_list:[{state:'待发货',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'},],
        f_list:[{state:'卖家已发货',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'},],
        l_list:[{state:'交易成功',date:1,img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02'},],
    }
  },
  methods: {
       onChange(event) {
         console.log(event.target.index)
        },
        into(key){
          switch (key) {
            case '晒图评价':
              wx.navigateTo({ 
                url: '/pages/evaluate/main'
              })
              break;
            case '查看物流':
              wx.navigateTo({ 
                url: '/pages/logistics/main'
              })
              break;
            case '退换':
              wx.navigateTo({ 
                url: '/pages/refund/main'
              })
              break; 
            case '退款':
              wx.navigateTo({ 
                url: '/pages/refund/main'
              })
              break;    
            default:
              break;
          }
        },
        order_details(index){
            let state = this.list[index].state
            wx.navigateTo({ 
                url: '/pages/order_details/main?state='+state
            })
        }
  },
  created () {
    // let app = getApp()
  },
  onLoad(options){
    if(options.id==4){
      this.active=0
    }else{
      this.active = Number(options.id)+1
    }
  }
}
</script>

<style scoped lang="less">
  .order{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    .content{
      color: red;
      width: 100%;
      .list{
        width: 100%;
        height: 408rpx;
        background: #fff;
        margin-bottom: 20rpx;
        padding: 32rpx 30rpx 0 30rpx;
        box-sizing: border-box;
        font-size:26rpx;
        color: #333;
        .info{
          width: 100%;
          margin: 22rpx 0 10rpx 0;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          image{
            width: 150rpx;
            height: 150rpx;
          }
          .info_r{
            width: 515rpx;
            height: 150rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title{
              overflow:hidden;
              text-overflow: ellipsis;//显示省略号
              display:-webkit-box;
              -webkit-line-clamp:2;//块元素显示的文本行数
              -webkit-box-orient:vertical;
            }
            .specifications{
              margin-bottom: 10rpx;
              color: #999;
              font-size: 24rpx;
            }
          }
        }
        .total{
          width: 100%;
          height: 68rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          border-bottom:2rpx solid rgba(204,204,204,1);
          .total_info{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .price{
              margin-left: 36rpx;
            }
          }
        }
        .change_total{
          width: 100%;
          height: 90rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .change_info{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .box{
              width:140rpx;
              height:60rpx;
              border:2rpx solid rgba(112,112,112,1);
              border-radius:30rpx;
              line-height: 60rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }
 
</style>
